<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车结算</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/flexible.css">
    <script src="js/flexible.js"></script>
</head>
<body class="backgroundf8">
<div class="common clearfix height38 title_back">
    <a href="#" class="lf color0 shopping_left postion">
        <img class="shopping_left_img" src="images/baileft.png">
        <span class="back">返回</span>
    </a>
    购物车结算
</div>
<div class="shoppingCart_title">
    <span>商品列表</span>
    <span class="color3c">共</span>
    <span class="color3c">12</span>
    <span class="color3c">件宝贝</span>
    <span class="rf"><img src="images/delect.png"></span>
</div>
<div class="order_message clearfix Settlement" style="padding-top:0.2rem;">
    <div class="delect_img"></div>
    <div class="right_shopping_message">
        <div class="left_order">
                <img src="images/order.jpg">
        </div>
        <div class="right_order">
            <p class="order_title">春夏薄款运动速干紧身套装运动速干紧身套装春夏薄速干紧身套装</p>
            <p class="sales">
                <span>颜色：</span><span class="marginright10">粉色</span>
                <span>尺码：</span><span class="marginright10">L</span>
            </p>
            <p>
                <span class="price_Icon colors">￥</span><span class="details_price colors unitPrice">198</span>
                <span class="rf add_order">
                        <span onclick="reduce()" class="reduce"><img  src="images/reduce3.png" /></span>
                        <span class="numbers">1</span>
                        <span onclick="addNumber()" class="addNumber"><img   src="images/add1.png" /></span>
                    </span>
            </p>
        </div>
    </div>
</div>

<div class="order_message clearfix Settlement" style="padding-top:0.2rem;">
        <div class="delect_img"></div>
        <div class="right_shopping_message">
            <div class="left_order">
                    <img src="images/order.jpg">
            </div>
            <div class="right_order">
                <p class="order_title">春夏薄款运动速干紧身套装运动速干紧身套装春夏薄速干紧身套装</p>
                <p class="sales">
                    <span>颜色：</span><span class="marginright10">粉色</span>
                    <span>尺码：</span><span class="marginright10">L</span>
                </p>
                <p>
                    <span class="price_Icon colors">￥</span><span class="details_price colors unitPrice">198</span>
                    <span class="rf add_order">
                            <span onclick="reduce()" class="reduce"><img  src="images/reduce3.png" /></span>
                            <span class="numbers">1</span>
                            <span onclick="addNumber()" class="addNumber"><img   src="images/add1.png" /></span>
                        </span>
                </p>
            </div>
        </div>
    </div>

    <div class="order_message clearfix Settlement" style="padding-top:0.2rem;">
        <div class="delect_img active"></div>
        <div class="right_shopping_message">
            <div class="left_order">
                    <img src="images/order.jpg">
            </div>
            <div class="right_order">
                <p class="order_title">春夏薄款运动速干紧身套装运动速干紧身套装春夏薄速干紧身套装</p>
                <p class="sales">
                    <span>颜色：</span><span class="marginright10">粉色</span>
                    <span>尺码：</span><span class="marginright10">L</span>
                </p>
                <p>
                    <span class="price_Icon colors">￥</span><span class="details_price colors unitPrice">198</span>
                    <span class="rf add_order">
                        <span onclick="reduce()" class="reduce"><img  src="images/reduce3.png" /></span>
                        <span class="numbers">1</span>
                        <span onclick="addNumber()" class="addNumber"><img   src="images/add1.png" /></span>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="footer_money">
        <div class="lf padding10"><span class="select_img"></span>全选</div>
        <span class="rf padding10 settlement_money">结算(<span>6</span>)</span>
        <p class="rf padding10">
            <span>合计：</span>
            <span class="price_Icon">￥</span><span class="details_price">198</span>
        </p>
    </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function reduce(){
        var number=$(".numbers").html();
        if(number==1){
            $(".reduce img").attr("src","images/reduce3.png");
        }else{
            number--;
            var price=parseInt($(".unitPrice").html());
            var  allprice=number*price;
            $(".all_nuber").html(allprice);
            $(".numbers").html(number);
        }
    }
    function addNumber(){
        var number=$(".numbers").html();
        //获取库存
        var Stock=8;
        if(number>=Stock){

        }else{
            number++;
            $(".reduce img").attr("src","images/reduce2.png");
            var price=parseInt($(".unitPrice").html());
            var  allprice=number*price;
            $(".all_nuber").html(allprice);
            $(".numbers").html(number);
        }
    }

    // 选中物品
    $(".delect_img").on('click',function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
    })

    //全选
    $(".select_img").on('click',function(){
        if($(this).hasClass("select_img_active")){
            $(this).removeClass("select_img_active")
        }else{
            $(this).addClass("select_img_active")
        }
    })
    </script>
</html>